@import "../../../customGlobal.scss";

@supports (top: env(safe-area-inset-top)) {
  .hiddenTitleBar {
    padding-top: env(safe-area-inset-top);
  }
}

//  after iphone 11
@supports (top: constant(safe-area-inset-top)) {
  .hiddenTitleBar {
    padding-top: constant(safe-area-inset-top);
  }
}

.mine-wrap {
  ion-avatar {
    margin: 0 auto;
  }
}

ion-header ion-toolbar:first-child {
  padding-top: var(--ion-safe-area-top, 0);
  --border-width: 0 0 0;
}

ion-toolbar {
  --background: linear-gradient(to right, #ff9500, #ff6314);

  @if $appType =="LJ" {
    --background: linear-gradient(323deg,
        #fadc15 0%,
        #f6da20 100%) !important; // linear-gradient(323deg, #fadc15 0%, #f6da20 100%);
  }

  --ion-color-base: transparent !important;
  --border-width: 0;
}

.modal-page {
  position: relative;
  min-height: 11.5rem;

  @supports (top: env(safe-area-inset-top)) {
    min-height: calc(env(safe-area-inset-top) + 11.5rem);
    padding-top: env(safe-area-inset-top);
  }

  @supports (top: constant(safe-area-inset-top)) {
    padding-top: constant(safe-area-inset-top);
    min-height: calc(constant(safe-area-inset-top) + 11.5rem);
  }

  background: linear-gradient(to right, #ff9500, #ff6314);

  @if $appType =="LJ" {
    background: linear-gradient(140deg, #ffe015 0%, #fad119 100%);
  }

  border-radius: 50px/5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -0.85rem;
}

ion-label {
  margin: 15px 8px 15px 0;
  font-size: 0.8rem;
}

.links-list {
  position: relative;
  z-index: 2;
}

.links-list:last-child {
  border-style: none;
}

ion-thumbnail {
  width: 5.5vw;
  height: 5.5vw;
}

.bg-img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10.81rem;
  height: 9.5rem;
}

.operate-info {
  position: relative;
  margin-top: 1.31rem;
  z-index: 2;
}

li {
  float: left;
  width: 50%;
}

.count {
  text-align: center;
  font-size: 1.38rem;
  line-height: 1;
  color: #ffffff;
  font-weight: bold;
}

.li-operate {
  font-size: 0.75rem;
  color: #ffffff;
  line-height: 0.75rem;
  margin-top: 0.63rem;
}

.icon-new {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: #ff6314;
  float: right;
  margin-top: -0.5rem;
  margin-right: 2.3rem;
}

.operate-info::after {
  content: "";
  display: block;
  clear: both;
  width: 0;
  height: 0;
  visibility: hidden;
}

.icon-circle {
  // position: absolute;
  margin-left: 0.63rem;
  width: 1rem;
  height: 1rem;
}

.set-img-bg {
  height: 2.75rem;
  z-index: 2;
  position: relative;
  padding-right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.set-img {
  height: 1.5rem;
  width: 1.5rem;
  margin-top: 1.88rem;
}

.top {
  position: relative;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #fff;
  padding: 0rem 0rem 2.56rem 1.375rem;
}

.content {
  z-index: 2000;
  position: relative;
  margin-left: 4rem;
  margin-top: 0.375rem;

  @if $appType =="LJ" {
    padding-top: 0.25rem;
  }
}

.content p {
  line-height: 1;
}

.content .operate {
  height: 3.125rem;
  line-height: 3.125rem;
}

.mobile {
  opacity: 0.7;

  @if $appType =="LJ" {
    font-size: 0.75rem;
    color: $LJLabelColor;
  }
}

.nickname {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;

  @if $appType =="LJ" {
    font-size: 1.13rem;
    color: #0f0f0f;
    margin-bottom: 0.5rem;
  }
}

ion-icon {
  position: absolute;
  margin-left: 5px;
  opacity: 0.5;
}

ion-avatar {
  margin: 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  background: #fff;
  float: left;
  border: solid 1px #ffffff;

  @if $appType =="LJ" {
    width: 3.13rem;
    height: 3.13rem;
    border: 0.13rem solid rgba(255, 255, 255, 0.35);
  }
}

.nameLeftBox {
  display: flex;
  align-items: center;
}

.hiddenTitleBar {
  background: linear-gradient(90deg, #ffe015 0%, #fad119 100%, #fad119 100%);
  margin-top: unset;
  position: sticky;
  z-index: 9999;
}

.hiddenText {
  font-size: 1.13rem;
  font-weight: bold;
  color: #0f0f0f;
}

.set-img-bg2 {
  height: 4rem;
  z-index: 999;
  padding-right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  opacity: 0;
}

.modal-top {
  @if $appType =="LJ" {
    height: 0.5rem;
    // background: linear-gradient(323deg, #fadc15 0%, #f6da20 100%) !important;
    background: linear-gradient(140deg, #ffe015 0%, #fad119 100%) !important;
  }
}

.companyName {
  font-size: 0.75rem;
  font-weight: 400;
  color: #252629;
}

.superior {
  font-weight: 400;
  font-size: 0.75rem;
  color: #222222;
  text-align: left;
  padding-top: 0.25rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.superior-icon {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  margin-left: 0.5rem;
}


.verifyIDCardBox {
  width: 4.88rem;
  height: 1.13rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0.56rem 0rem 0rem 0.56rem;
  padding-left: 0.25rem;
  display: flex;
  align-items: center;
}

.verifyIDCardIcon {

  width: 1rem;
  height: 1rem;
  margin-right: 0.13rem;

}

.verifyIDCardLabel {
  font-weight: 600;
  font-size: 0.63rem;
  color: #8C5D1C;
  text-align: left;
}